跳到主要内容

FQSwitch 开关

介绍​

使用开关切换两种状态之间。

用法​

基本引入​

import { FQSwitch } from '@fq/fq-weapp-ui';

组件依赖的样式文件(仅按需引用时需要)

import '@fq/fq-weapp-ui/dist/styles/components/switch.scss';

基础用法​

<FQSwitch />

不可用​

<FQSwitch disabled />

文字和图标​

<FQSwitch checkedChildren='开启' unCheckedChildren='关闭' />
<FQSwitch checkedChildren='1' unCheckedChildren='0' />

大小​

<FQSwitch size='large' />
<FQSwitch />
<FQSwitch size='small' />

API​

属性​

参数说明类型默认值版本
checked指定当前是否选中booleanfalse
checkedChildren选中时的内容ReactNode-
defaultChecked初始是否选中booleanfalse
defaultValuedefaultChecked 的别名boolean-
disabled是否禁用booleanfalse
size开关大小,可选值 large, default, smallstringdefault
unCheckedChildren非选中时的内容ReactNode-
valuechecked 的别名boolean-
onChange变化时回调函数function(checked: boolean, event: ITouchEvent)-
onClick点击时的回调函数function(checked: boolean, event: ITouchEvent)-